<template>
    <div class="details">
        <!-- 内容区域 -->
        <div class="details-scroll">
            <div class="content-container">
                <div class="swipe-wrapper">
                    <mt-swipe :auto="4000">
                        <mt-swipe-item v-for="item in imgArr">
                            <my-image class="my-img" :imgUrl="soursePath+item.iconurl"></my-image>
                        </mt-swipe-item>
                    </mt-swipe>
                </div>
                <div class="meal-tiltle">
                    <div class="title-left">
                        <p class="name">{{mealName}}</p>
                        <p class="slogan">{{slogan}}</p>
                    </div>
                    <div class="title-right">
                        <p class="price">&yen;{{price}}</p>
                    </div>
                </div>

                <div class="meal-content" v-html="htmlmsg">
                   
                </div>
            </div>
        </div>
        <!-- 底部按钮 -->
        <template v-if="hasBuy">
          <mt-button disabled size="large" class="bottom-btn hasbuy-btn" type="default">已购买</mt-button>
        </template>
        <template v-else>
          <mt-button size="large" class="bottom-btn buy-btn" type="default" @click.native="buyHandle">立即购买</mt-button>
        </template>
        <!-- 弹出框区域 -->
        <mt-popup class="select-popup" position="bottom" popup-transition="popup-slide" :modal=true v-model="showPopup">
            <div ref="betterscroll" class="popup-content">
              <div class="select-word-container">
                <p class="select-word">请选择需要购买的数量</p>
              </div>
              <div class="select-content">
                <div class="left">
                  <mt-picker class="my-picker" :slots="slots" @change="onValuesChange" :itemHeight="42" :visibleItemCount="3"></mt-picker>
                  <p class="num-word">件</p>
                </div>
                <div class="total-div">
                  <span class="total-word">共计：</span><span class="symbol">&yen;</span><span class="total-price">{{totalPrice}}</span>
                </div>
              </div>
              <mt-button size="large" class="exchange-btn" type="default" @click.native="popupBuyHandle">购买</mt-button>
            </div>
        </mt-popup>
    </div>
</template>

<script>
import $ from "jquery";
import { Toast, Popup, Button, Swipe, SwipeItem, Picker } from "mint-ui";
import Vue from "vue";
import BScroll from "better-scroll";
import "mint-ui/lib/swipe/style.css";
import "mint-ui/lib/toast/style.css";
import "mint-ui/lib/swipe-item/style.css";
import "mint-ui/lib/button/style.css";
import "mint-ui/lib/popup/style.css";
import "mint-ui/lib/picker/style.css";
import { mapState } from "vuex";
import sharejs from "../../common/js/sharejs.js";
import wxpay from "../../common/js/wxpay";
import myImage from "../lazyloadImg/lazyImage.vue";

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.component(Popup.name, Popup);
Vue.component(Toast.name, Toast);
Vue.component(Picker.name, Picker);

export default {
  name: "v-details",
  data() {
    return {
      htmlmsg: "",
      imgArr: null,
      mealCover: "",
      price: 0,
      detailsid: "",
      slogan: "",
      mealName: "",
      hasBuy: false,
      showPopup: false,
      buyNum: 1,
      buyType: "1", //1代表一次只能购买一个、2代表一次可以购买多个
      slots: [
        {
          flex: "0 0 30px",
          values: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
          className: "slot1",
          defaultIndex: 0
        },
        {
          flex: "0 0 30px",
          values: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
          className: "slot2",
          textAlign: "left",
          defaultIndex: 1
        }
      ]
    };
  },
  components: { myImage },
  computed: {
    ...mapState(["path", "role", "userid", "soursePath"]),
    totalPrice() {
      return this.buyNum * this.price;
    }
  },
  beforeRouteLeave(to, from, next) {
    sharejs.defultShareMsg();
    sharejs.getWxData();
    next();
  },
  created() {
    // document.body.scrollTop = 0;
    this.detailsid = this.$route.params.detailsid;
    this.getDetailsData();
  },
  methods: {
    onValuesChange(picker, values) {
      var tempNum = parseInt(values[0] + values[1]);
      if (tempNum == 0) {
        picker.setSlotValue(1, 0);
        let value1Dom = $(".select-content .my-picker .slot2 .picker-item").eq(
          1
        );
        let clearId = setTimeout(() => {
          clearTimeout(clearId);
          if (!value1Dom.hasClass("picker-selected")) {
            value1Dom.addClass("picker-selected");
          }
        }, 100);
        this.buyNum = 1;
        return;
      }
      this.buyNum = tempNum;
    },
    buyHandle(event) {
      if (parseInt(this.role) >= 2) {
        //角色是商家
        Toast({
          message: "商户无法购买此产品！",
          iconClass: "iconfont icon-tishi1",
          duration: 2000
        });
      } else {
        //角色是普通的用户
        if (this.buyType == "2")
          this.showNumPopup(); //如果可一次性购买多个
        else this.jumpToPayPage();
      }
    },
    popupBuyHandle(event) {
      if (event._constructed) return;
      this.jumpToPayPage();
    },
    jumpToPayPage() {
      var cookieStr =
        "userid:" +
        this.userid +
        ",goodsid:" +
        this.detailsid +
        ",num:" +
        this.buyNum +
        ",types:GoodsPayParam";
      wxpay.GetPayCode(cookieStr);
    },
    showNumPopup() {
      this.showPopup = true;
      this.$nextTick(() => {
        if (!this.betterscroll)
          this.betterscroll = new BScroll(this.$refs.betterscroll, {
            click: true
          });
      });
    },
    getDetailsData() {
      this.$http
        .post(this.path + "store/Goods/goodsmsg", {
          goodsid: this.detailsid
        })
        .then(response => {
          let serverData = response.body.result;
          this.imgArr = serverData.imgarr;
          let ginfo = serverData.ginfo;
          this.price = ginfo.price;
          this.slogan = ginfo.message;
          this.mealName = ginfo.gname;
          this.hasBuy = !Boolean(ginfo.iscanbuy);
          this.buyType = ginfo.buyType.toString();
          //HTMLDecode();
          this.htmlmsg = this.unescapeHTML(ginfo.htmlmsg);
          this.updataShare();
        })
        .catch(response => {
          console.log(response);
        });
    },
    updataShare() {
      var shareUrl =
        this.$store.state.domainUrl +
        "wxapi/GetUserInfo/dropindex.php?type=amlzlogin&detailsid=" +
        this.detailsid +
        "&userid=" +
        this.userid;
      var shareimg = this.path + this.iconurl;
      sharejs.updateShareMsg(shareUrl, shareimg, this.slogan, this.mealName);
    },
    unescapeHTML: function(a) {
      a = "" + a;
      return a
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&apos;/g, "'");
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/css/mixin.styl';


.details {
  font-family: 'Microsoft YaHei';
  width: 100%;

  .details-scroll {
    width: 100%;
    padding-bottom: 0.5rem;

    .content-container {
      .swipe-wrapper {
        width: 100%;

        .mint-swipe {
          width: 3.2rem;
          height: 1.6rem;

          .my-img {
            background-color: #f1f1f1;
            width: 100%;
            height: 100%;
          }

          .mint-swipe-indicators {
            bottom: 0.06rem;

            .mint-swipe-indicator {
              background-color: #fff;
              margin: 0 0.05rem;
              opacity: 0.4;
            }

            .mint-swipe-indicator.is-active {
              background-color: #fff;
              opacity: 0.9;
            }
          }
        }
      }

      .meal-tiltle {
        height: 0.6rem;
        padding: 0 0.18rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-left {
          .name {
            color: #222;
            font-size: 0.14rem;
            font-weight: 600;
            // letter-spacing: 0.01rem;
          }

          .slogan {
            margin-top: 0.05rem;
            font-size: 0.13rem;
            line-height: 0.14rem;
            color: #898989;
            letter-spacing: 0.005rem;
          }
        }

        .title-right {
          flex-shrink: 0;

          .price {
            color: #e61874;
            font-weight: 500;
            font-size: 0.15rem;
          }
        }
      }

      .meal-content {
        padding: 0.1rem 0.14rem 0 0.14rem;
        box-sizing: border-box;
        border-top-1px(#EEEEEE);

        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .bottom-btn {
    position: fixed;
    left: 50%;
    max-width: 750px;
    width: 88%;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50, 0, 0);
    bottom: 0.12rem;
    font-size: 0.13rem;
    letter-spacing: 0.02rem;
    height: 0.3rem;
    box-shadow: none;

    &.hasbuy-btn {
      color: #8a8a8a;
      background-color: #ddd;
      opacity: 0.9;
    }

    &.buy-btn {
      background-color: #b37287;
      color: #fff;
      opacity: 0.9;
    }
  }

  .select-popup {
    width: 100%;
    height: 2.11rem;
    border-top: 0.14rem solid #BE8798;
    border-radius: 0.07rem 0.07rem 0px 0px;

    .popup-content {
      position: absolute;
      left: 0.12rem;
      right: 0.12rem;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .select-word-container {
        width: 100%;
        border-bottom: 1px solid #ddd;

        .select-word {
          color: #595656;
          font-size: 0.13rem;
          line-height: 0.36rem;
          padding-left: 0.14rem;
          position: relative;
          top: 0.04rem;
        }
      }
    }

    .select-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      margin: 0 0.16rem;

      .left {
        display: flex;
        align-items: center;

        .my-picker {
          flex: 0 0 0.8rem;

          .picker-item {
            font-size: 0.18rem;
            color: #acacac;

            &.picker-selected {
              color: #595656;
            }
          }
        }

        .num-word {
          flex: 0 0 0.5rem;
          line-height: 0.36rem;
          font-size: 0.18rem;
          color: #595656;
        }
      }

      .total-div {
        text-align: center;
        margin-right: 0.1rem;
        color: #b37287;

        .total-word {
          font-size: 0.15rem;
          letter-spacing: 0.02rem;
        }

        .symbol {
          font-size: 0.13rem;
          margin-right: 0.02rem;
        }

        .total-price {
          display: inline-block;
          font-size: 0.15rem;
        }
      }
    }

    .exchange-btn {
      margin: 0 auto 0.1rem auto;
      width: 96%;
      background-color: #BE8798;
      color: #fff;
      font-size: 0.13rem;
      letter-spacing: 0.05rem;
      height: 0.3rem;
      box-shadow: none;
    }
  }
}
</style>